<template>
  <div class="container">
    <header></header>
    <main>
      <aside>
        <ul>
          <li v-for="navItem in menus" :key="navItem.id" class="navItem">
            {{ navItem.title }}
            <ul>
              <li
                v-for="subNavItem in navItem.children"
                :key="subNavItem.id"
                class="subNavItem"
              >
                <router-link :to="'/home/'+subNavItem.path">{{
                  subNavItem.title
                }}</router-link>
              </li>
            </ul>
          </li>
        </ul>
       
      </aside>
      <main>
        <!-- 
                    keep-alive中的include或者exclude是和组件的name对应的
                    这种设置有两个缺点
                    1）你必须要给每个组件都要设置一个name属性
                    2）如果缓存组件和不缓存组件都比较多，必须一个一个的进行设置
                 -->
        <!-- <keep-alive include="StudentsAdd">
                    <router-view></router-view>
                </keep-alive> -->
        <keep-alive>
          <router-view v-if="$route.meta.isKeepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.isKeepAlive"></router-view>
      </main>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          id: "0",
          path: "",
          icon: "",
          title: "用户管理",
          children: [
            {
              id: "01",
              path: "usersList",
              icon: "",
              title: "用户列表",
            },
          ],
        },
        {
          id: "1",
          path: "",
          icon: "",
          title: "学生管理",
          children: [
            {
              id: "11",
              path: "studentsList",
              icon: "",
              title: "学生列表",
            },
            {
              id: "12",
              path: "studentsAdd",
              icon: "",
              title: "新增学生",
            },
          ],
        },
        {
          id: "2",
          path: "",
          icon: "",
          title: "班级管理",
          children: [
            {
              id: "21",
              path: "classesList",
              icon: "",
              title: "班级列表",
            },
            {
              id: "22",
              path: "classesAdd",
              icon: "",
              title: "新增班级",
            },
          ],
        },
        {
          key: "3",
          path: "",
          icon: "",
          title: "专业管理",
          children: [
            {
              key: "31",
              path: "subjectsList",
              icon: "",
              title: "专业列表",
            },
          ],
        },
        {
          key: "4",
          path: "",
          icon: "",
          title: "课程管理",
          children: [
            {
              key: "41",
              path: "coursesList",
              icon: "",
              title: "课程列表",
            },
            {
              key: "42",
              path: "coursesAdd",
              icon: "",
              title: "增加课程",
            },
          ],
        },
        {
          key: "5",
          path: "",
          icon: "",
          title: "教师管理",
          children: [
            {
              key: "51",
              path: "teachersList",
              icon: "",
              title: "教师列表",
            },
            {
              key: "42",
              path: "teachersAdd",
              icon: "",
              title: "增加教师",
            },
          ],
        },
      ],
      authMenus:[]
    }
  },
  methods:{
    async getAuthMenus(){
        const {data}=await this.$api.users.getAuthMenus()
        this.authMenus=data
    }
  },
  computed:{
    menus(){
        const menusData=this.navList.map((item,index)=>{
            let childAuthAry=item.children.filter(child=>{
                return this.authMenus.includes(child.path)
            })
            if (childAuthAry.length>0) {
               return {...item,children:childAuthAry}
            }
        })
        return menusData.filter(item=>item)
    }
  },
  created(){
    this.getAuthMenus()
  }
};
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  header {
    width: 100vw;
    height: 80px;
    background-color: gray;
  }
  main {
    display: flex;
    flex: 1;
    aside {
      height: 100%;
      width: 220px;
      background-color: gray;
      .navItem {
        margin-left: 30px;
        .subNavItem {
          margin-left: 30px;
        }
      }
    }
    main {
      flex: 1;
      background: white;
    }
  }
}
</style>